import React, { useState, useEffect } from 'react'
import { Image, Carousel, Card } from 'antd'
import './index.scss'
import { useSelector, useDispatch, connect } from 'react-redux'
import iconPayment from '@/assets/images/icon-payment.png'
import iconBerth from '@/assets/images/icon-berth.png'
import AnimatedNumber from '@/components/AnimatedNumber'
const mapStateToProps = (state) => {
  return {
    countAmount: state.counter.totalAmount,
  }
}

const TopDataMap = (props) => {
  return (
    <div className="topTotal">
      <div className="amountBox">
        <Image preview={false} src={iconPayment} width={80} />
        <div className="amount">
          <div className="name">收费总金额</div>
          <div className="value">
            <AnimatedNumber value={props.countAmount} duration={1.5} />
          </div>
        </div>
      </div>
      <div className="amountBox">
        <Image preview={false} src={iconBerth} width={80} />
        <div className="amount">
          <div className="name">车位总数</div>
          <div className="value">{props.park}</div>
        </div>
      </div>
    </div>
  )
}

export default connect(mapStateToProps)(React.memo(TopDataMap))
